<template>
  <div class="product-list-wati-child">
    <el-card class="wrap-card">
      <div
        slot="header"
        class="card-title"
      >
        <span>添加</span>
        <div
          class="close"
          type="text"
          @click="close"
        >关闭</div>
      </div>
      <div class="search">
        <el-input
          size="small"
          class="search-input"
          clearable
          v-model="keyword"
          placeholder="输入配料编号/名称关键字搜索"
        ></el-input>
        <el-button
          plain
          size="small"
          type="primary"
          @click="getData"
        >查询</el-button>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        height="450"
        :border="true"
        :fit="true"
        :stripe="true"
        size="mini"
        align="center"
        ref="table"
        @selection-change="handleSelectionChange"
      >

        <el-table-column
          type="selection"
          width="55"
        >
        </el-table-column>

        <el-table-column
          prop="number"
          label="配料编号"
          min-width="100"
          align="center"
        >
        </el-table-column>

        <el-table-column
          prop="material_name"
          label="配料名称"
          min-width="170"
          align="center"
        >
        </el-table-column>

        <el-table-column
          label="规格/型号"
          min-width="220"
          align="center"
        >
          <template slot-scope="scope">
            <div
              v-if="scope.row._models_name.length>0"
              class="check-list"
              @click="add(scope.$index)"
              v-text="(scope.row._models_name).join(',')"
            ></div>
            <div
              v-else
              class="check-list-none"
            >暂无,请先到配料列表增加规格/型号</div>
          </template>
        </el-table-column>

        <el-table-column
          prop="material_unit"
          label="单位"
          min-width="120"
          align="center"
        >
        </el-table-column>
      </el-table>

      <el-pagination
        class="page-count"
        @current-change="getData"
        background
        layout="total, prev, pager, next"
        :total="totalCount"
        :current-page.sync='page'
        :page-size="10"
      ></el-pagination>

      <div class="btn">
        <el-button
          size="mini"
          plain
          type="danger"
          @click="close"
        >取消</el-button>
        <el-button
          size="mini"
          plain
          type="primary"
          @click="confirm"
        >确认</el-button>
      </div>

      <deleteConfirm
        v-if="showMask"
        @closeDelete="closeDelete"
        @deleteConfirm="deleteConfirm"
      ></deleteConfirm>
    </el-card>

    <el-card
      class="check-wrap"
      v-show="modelShow"
    >
      <div
        slot="header"
        class="card-title"
      >
        <span>规格</span>

        <el-checkbox
          style="marginLeft:10px;"
          :indeterminate="isIndeterminate"
          v-model="isAll"
          @change="checkedAll"
        >全选</el-checkbox>
      </div>
      <el-checkbox-group
        class="checkbox"
        v-model="model"
        @change="checkChange"
      >
        <template v-for="(item,index) in formats">
          <el-checkbox
            :key="index"
            border
            :label="item.format_id"
          >{{item.format_name}}</el-checkbox>
        </template>
      </el-checkbox-group>
      <div class="btn">
        <el-button
          size="mini"
          plain
          type="danger"
          @click="modelClose"
        >取消</el-button>
        <el-button
          size="mini"
          plain
          type="primary"
          @click="modelConfirm"
        >确认</el-button>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Prop, Emit, Watch } from "vue-property-decorator";
import ajaxResquest from "@/api/apiRequest";
import AjaxResquest from "@/api/apiRequest";

@Component({})
export default class AccessCreateChild extends Vue {
  tableData: any[] = [];
  keyword: string = "";
  totalCount: number = 0;

  goodsRes!: ajaxResquest;
  showMask: boolean = false;
  page: number = 1;
  pageSize: number = 10;

  modelShow: boolean = false;
  model: any[] = [];
  openIndex!: number;

  formats: any = [];

  hasSelect: any[] = [];
  $refs!: any;
  isAll: boolean = true;
  isIndeterminate: boolean = false;
  @Prop()
  id!: any;

  @Watch("model")
  modelChange(val: any) {
    console.log(val);
  }

  mounted() {
    this.goodsRes = new ajaxResquest("/auxiliaryparts/auxiliaryPartsList");
    this.getData();
  }
  checkedAll(val: any) {
    let a: any = [];
    this.formats.forEach((e: any) => {
      a.push(e.auxiliary_parts_formats_id);
    });
    this.model = val ? a : [];
    this.isIndeterminate = false;
  }
  checkChange(val: any) {
    console.log(val);
    this.isIndeterminate =
      val.length > 0 &&
      val.length <
        this.tableData[this.openIndex].auxiliary_parts_formats.length;
    this.isAll =
      val.length ===
      this.tableData[this.openIndex].auxiliary_parts_formats.length;
  }
  // 增加规格/型号的函数
  add(index: number) {
    // 获取打开的index
    console.log(this.tableData[index]);

    this.openIndex = index;
    this.model = this.tableData[index]._models_id;
    this.isAll = this.tableData[index].isAll;
    this.isIndeterminate = this.tableData[index].isIndeterminate;
    this.modelShow = true;
    // 把checkbox赋值
    this.formats = this.tableData[index].format_info;
  }
  getData() {
    let data = {
      keyWord: this.keyword,
      page: this.page,
      pageSize: this.pageSize
    };
    this.goodsRes.getFunction(data).then((res: any) => {
      if (res.data.code === 1) {
        this.totalCount = res.data.data.allCount;
        this.tableData = res.data.data.types;

        this.tableData.map((i: any) => {
          // return (i._models = []);
          i._models_name = [];
          i._models_id = [];
          i.isAll = true;
          i.isIndeterminate = false;
          i.format_info.map((j: any) => {
            i._models_name.push(j.format_name);
            i._models_id.push(j.format_id);
          });
        });
        console.log(this.tableData);
      }
    });
  }
  // 勾选动作
  handleSelectionChange(val: any) {
    console.log(val);
    this.hasSelect = val;
  }
  @Emit()
  close() {}
  // 添加列表的确认
  confirm() {
    this.$emit("confirm", this.hasSelect);
    this.$refs.table.clearSelection();
  }
  // 复选框关闭
  modelClose() {
    this.modelShow = false;
  }

  // 复选框的确认
  modelConfirm() {
    let temp = this.tableData[this.openIndex];
    temp._models_name = this.model;
    temp.isAll = this.isAll;
    temp.isIndeterminate = this.isIndeterminate;
    let tempName: any[] = [];
    this.formats.map((i: any) => {
      if (this.model.includes(i.format_id)) {
        tempName.push(i.format_name);
      }
    });
    temp._models_name = tempName;
    temp._models_id = this.model;
    this.$set(this.tableData, this.openIndex, temp);
    this.modelShow = false;
  }
}
</script>
<style lang="less">
.product-list-wati-child {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  // min-width: 600px;
  width: auto;
  height: 700px;
  z-index: 999;
  .wrap-card {
    height: 700px;
  }
  .search {
    text-align: left;
    margin-bottom: 20px;
    .search-input {
      width: 300px;
      margin: 0 20px 0 0px;
    }
  }
  .page-count {
    margin-top: 10px;
    text-align: right;
  }
  .btn {
    margin-top: 15px;
    text-align: left;
  }
  .check-wrap {
    z-index: 10001;
    position: absolute;
    top: 0%;
    left: -5%;
  }
  .check-list {
    text-decoration: underline;
    color: rgb(33, 132, 231);
  }
  .checkbox {
    width: 800px;
    max-height: 500px;
    overflow: auto;
    .el-checkbox {
      margin-top: 5px;
    }
    .el-checkbox:nth-child(1) {
      margin-left: 10px;
    }
  }
}
</style>
